<script lang="tsx" setup>
import type { Component } from 'vue';
import { computed, reactive, ref } from 'vue';
import type { MenuOption } from 'naive-ui';
import { useThemeStore } from '@/store/modules/theme';
import { getReadDot } from '@/service/api/system/notice';
import LookForward from './look-forward.vue';
import SystemNotice from './notice-component/system-notice.vue';
const themeStore = useThemeStore();
const currentKey = ref<string>('system-notice');

const show = ref(false);
const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';
  return themeStore.darkMode ? '' : COLOR_WHITE;
});
const menuOptions: MenuOption[] = reactive([
  {
    label: '通知公告',
    key: 'system-notice'
  },
  {
    key: 'divider-1',
    type: 'divider'
  },
  {
    label: '系统设置',
    key: 'notice-system'
  }
]);
const handleUpdateValue = (key: string) => {
  currentKey.value = key as string;
};
const componentMap: Record<string, Component> = {
  'system-notice': SystemNotice,
  'notice-system': LookForward
};
const activeModule = computed(() => componentMap[currentKey.value as string]);
const dotNumber = ref<number>(0);

const getReadDotCount = async () => {
  const { data, error } = await getReadDot();
  if (!error) {
    // console.log(data.data);
    dotNumber.value = data.data;
  }
};
getReadDotCount();
</script>

<template>
  <div>
    <NButton quaternary @click="show = true">
      <template #icon>
        <NBadge v-if="dotNumber !== 0" dot processing>
          <SvgIcon icon="tdesign:notification" />
        </NBadge>
        <SvgIcon v-else icon="tdesign:notification" />
      </template>
    </NButton>
    <NDrawer v-model:show="show" :mask-closable="false" height="90%" placement="bottom">
      <NDrawerContent closable title="消息管理" body-content-class="bg-layout">
        <div class="w-full flex flex-justify-center">
          <div class="w-60%">
            <NGrid x-gap="10" cols="24" item-responsive responsive="screen" class="h-full overflow-hidden">
              <NGridItem class="h-700px" span="24 s:24 m:5 l:5 xl:5 2xl:5" :style="{ backgroundColor: bgColor }">
                <NMenu :value="currentKey" :options="menuOptions" @update:value="handleUpdateValue" />
              </NGridItem>
              <NGridItem span="24 s:24 m:19 l:19 xl:19 2xl:19">
                <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
                  <component :is="activeModule" />
                </Transition>
                <!-- <SystemNotice /> -->
              </NGridItem>
            </NGrid>
          </div>
        </div>
      </NDrawerContent>
    </NDrawer>
  </div>
</template>

<style lang="scss" scoped>
.border-right {
  border-right: 1px;
  border-style: solid;
  border-color: var(--un-default-border-color, #e5e7eb);
}
</style>
